/* General CSS Rules*/
* {
    --font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 12px;
    font-family: Consolas, 'Fira Code',Courier New,Monaco,Andale Mono,Ubuntu Mono,monospace;
}

body {
    padding: 0;
    margin: 0;
    line-height: 14px;
}

[data-theme="classic-light"] {
    --bg-color: #ffffff;
    --fg-color: #000000;

    --bg0:      #ffffff;
    --bg1:      #fcfcfc;
    --bg2:      #f0f0f0;
    --bg3:      #ececec;
    --bg4:      #e0e0e0;
    --bg5:      #ddccab;

    --fg0:      #000;
    --fg1:      #333;
    --red:      #c00;
    --orange:   #a50;
    --yellow:   #bb0;
    --green:    #080;
    --aqua:     #099;
    --blue:     #01a;
    --purple:   #705;


    --bg_diff_green:    #e4edc8;
    --bg_visual_green:  #dde5c2;
    --bg_diff_red:      #f8e4c9;
    --bg_visual_red:    #f0ddc3;
    --bg_diff_blue:     #e0e9d3;
    --bg_visual_blue:   #d9e1cc;
    --bg_visual_yellow: #f9eabf;
    --bg_current_word:  #f3eac7;

    --bg_red:           #a55;
    --bg_green:         #4b4;
    --bg_yellow:        #ca0;

    --grey0:            #aaa;
    --grey1:            #999;
    --grey2:            #555;

    --cost-Lf: 1.0;
}

[data-theme="gruvbox-light"] {
    --bg-color: #f9f5d7;
    --fg-color: #654735;

    --bg0:      #fbf1c7;
    --bg1:      #f4e8be;
    --bg2:      #f2e5bc;
    --bg3:      #eee0b7;
    --bg4:      #e5d5ad;
    --bg5:      #ddccab;

    --fg0:      #654735;
    --fg1:      #4f3829;
    --red:      #c14a4a;
    --orange:   #c35e0a;
    --yellow:   #b47109;
    --green:    #6c782e;
    --aqua:     #4c7a5d;
    --blue:     #45707a;
    --purple:   #945e80;

    --bg_diff_green:    #e4edc8;
    --bg_visual_green:  #dde5c2;
    --bg_diff_red:      #f8e4c9;
    --bg_visual_red:    #f0ddc3;
    --bg_diff_blue:     #e0e9d3;
    --bg_visual_blue:   #d9e1cc;
    --bg_visual_yellow: #f9eabf;
    --bg_current_word:  #f3eac7;

    --bg_red:           #ae5858;
    --bg_green:         #6f8352;
    --bg_yellow:        #a96b2c;

    --grey0:            #a89984;
    --grey1:            #928374;
    --grey2:            #7c6f64;

    --cost-Lf: 0.8;
}
[data-theme="gruvbox-dark"] {
    --bg-color: #f9f5d7;
    --fg-color: #654735;

    --bg0:      #282828;
    --bg1:      #32302f;
    --bg2:      #32302f;
    --bg3:      #45403d;
    --bg4:      #45403d;
    --bg5:      #5a524c;

    --fg0:      #d4be98;
    --fg1:      #ddc7a1;
    --red:      #ea6962;
    --orange:   #e78a4e;
    --yellow:   #d8a657;
    --green:    #a9b665;
    --aqua:     #89b482;
    --blue:     #7daea3;
    --purple:   #d3869b;

    --bg_diff_green:    #32361a;
    --bg_visual_green:  #333e34;
    --bg_diff_red:      #3c1f1e;
    --bg_visual_red:    #442e2d;
    --bg_diff_blue:     #0d3138;
    --bg_visual_blue:   #2e3b3b;
    --bg_visual_yellow: #473c29;
    --bg_current_word:  #32302f;

    --bg_red:           #ea6962;
    --bg_green:         #a9b665;
    --bg_yellow:        #d8a657;


    --grey0:            #7c6f64;
    --grey1:            #928374;
    --grey2:            #a89984;

    --cost-Lf: 0.6;
}

body {
    background-color: var(--bg0);
    color: var(--fg0);

    --cs-keyword: var(--orange);
    --cs-int: var(--aqua);
    --cs-uint: var(--aqua);
    --cs-float: var(--aqua);
    --cs-str: var(--green);
    --cs-type: var(--blue);
    --cs-symbol: var(--purple);
    --cs-assign: var(--red);
    --cs-comment: var(--green);
    --cs-operator: var(--red);
    --cs-line-num: var(--grey0);
    --cs-register: var(--orange);
    --cs-variable: var(--grey2);
}


/* Syntax highlighting */
span.keyword      { color: var(--cs-keyword); font-weight: bold; }
span.IntImm       { color: var(--cs-int); }
span.UIntImm      { color: var(--cs-uint); }
span.FloatImm     { color: var(--cs-float); }
span.StringImm    { color: var(--cs-str); }
span.Type         { color: var(--cs-type); font-weight: bold; }
span.Symbol       { color: var(--cs-symbol); }
span.Assign       { color: var(--cs-operator); }
span.Comment      { color: var(--cs-comment); font-style: italic; }
span.Operator     { color: var(--cs-operator); }
#ir-code-pane     b.variable     { color: var(--cs-variable); }
#device-code-pane b.variable     { color: var(--cs-register); }

b.Highlight, b.Highlight *   {
    font-weight: bold;
    background-color: var(--bg_yellow) !important;
    color: var(--bg0) !important;
}
span.Highlight, span.Highlight * {
    font-weight: bold;
    background-color: var(--bg_red) !important;
    color: var(--bg0) !important;
}
[data-theme*="light"] {
    b.HighlightToggle0 { font-weight: bold; background-color: oklch(80% 0.18 0); }
    b.HighlightToggle1 { font-weight: bold; background-color: oklch(80% 0.18 50); }
    b.HighlightToggle2 { font-weight: bold; background-color: oklch(80% 0.18 100); }
    b.HighlightToggle3 { font-weight: bold; background-color: oklch(80% 0.18 150); }
    b.HighlightToggle4 { font-weight: bold; background-color: oklch(80% 0.18 200); }
    b.HighlightToggle5 { font-weight: bold; background-color: oklch(80% 0.18 260); }
    b.HighlightToggle6 { font-weight: bold; background-color: oklch(80% 0.18 310); }
}
[data-theme*="dark"] {
    b.HighlightToggle0 { background-color: oklch(40% 0.18 0); }
    b.HighlightToggle1 { background-color: oklch(40% 0.18 50); }
    b.HighlightToggle2 { background-color: oklch(40% 0.18 100); }
    b.HighlightToggle3 { background-color: oklch(40% 0.18 150); }
    b.HighlightToggle4 { background-color: oklch(40% 0.18 200); }
    b.HighlightToggle5 { background-color: oklch(40% 0.18 260); }
    b.HighlightToggle6 { background-color: oklch(40% 0.18 310); }
}

span.OpF32  { color: hsl(106deg 100% 40%); font-weight: bold; }
span.OpF64  { color: hsl(106deg 100% 30%); font-weight: bold; }
span.OpB8   { color: hsl(208deg 100% 80%); font-weight: bold; }
span.OpB16  { color: hsl(208deg 100% 70%); font-weight: bold; }
span.OpB32  { color: hsl(208deg 100% 60%); font-weight: bold; }
span.OpB64  { color: hsl(208deg 100% 50%); font-weight: bold; }
span.OpI8   { color: hsl(46deg 100% 45%); font-weight: bold; }
span.OpI16  { color: hsl(46deg 100% 40%); font-weight: bold; }
span.OpI32  { color: hsl(46deg 100% 34%); font-weight: bold; }
span.OpI64  { color: hsl(46deg 100% 27%); font-weight: bold; }
span.OpVec2 { background-color: var(--bg_visual_red); font-weight: bold; }
span.OpVec4 { background-color: var(--bg_visual_blue); font-weight: bold; }
span.Memory { color: #d22; font-weight: bold; }

span.Pred  b { background-color: var(--bg_visual_green); font-weight: bold !important; color: var(--red); }
span.Label b { background-color: var(--bg_visual_red); font-weight: bold !important; color: var(--aqua); }


/* Speedlight syntax */
.shj-syn-instruction { color: var(--purple); }
.shj-syn-register { color: var(--cs-register); }
.shj-syn-offset { color: var(--aqua); }
.shj-syn-label { color: var(--red); }
.shj-syn-asm-directive { color: var(--blue); }

.shj-syn-cmnt{
    font-style:italic;
    color: var(--cs-comment);
}
.shj-syn-err,.shj-syn-kwd{
    color: var(--cs-keyword);
}
.shj-syn-num,.shj-syn-class{
    color: var(--cs-int);
}
.shj-syn-str{
    color: var(--cs-str);
}
.shj-syn-bool{
    color: var(--cs-blue);
}
.shj-syn-type,.shj-syn-oper{
    color:#5af
}
.shj-syn-section,.shj-syn-func{
    color:#84f
}
.shj-syn-deleted,.shj-syn-var{
    color:#f44
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}


a,
a:hover,
a:visited,
a:active {
    color: inherit;
    text-decoration: none;
}

b {
    font-weight: normal;
}

table {
    font-size: 12px;
}


div#page-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}

/* Toolbar */

#toolbar {
    background-color: var(--bg1);
    border-bottom: 1px solid var(--fg1);
    padding: 1px;
    /*
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    */
}
#toolbar form {
    display: inline;
    margin-left: 1em;
    margin-right: 3em;
}


div#content {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Visualization panes */
div#visualization-panes {
    display: flex;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    position: relative;
}

div.pane {
    overflow: scroll;
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    counter-reset: line;
    min-width: 5vw;
    width: 33vw;
    padding-top: 10px;
    padding-bottom: 10px;
}
div.pane.collapsed-pane {
    display: none;
}

div#ir-code-pane {
    width: 50vw;
    padding-left: 24px;
}
[data-wrap="false"] {
    #ir-code-pane {
        overflow-x: scroll;
    }
    #ir-code-pane div.Module {
        width: max-content;
    }
}
[data-show-line-nums="true"] {
    div#ir-code-pane {
        padding-left: 50px;
    }
}

div#host-assembly-pane {
    width: 20vw;
}

div#device-code-pane {
    padding-left: 6em;
    width: 30vw;
}

/* Hiding logic */
[data-show-ir="false"] {
    div#ir-code-pane {
        display: none;
    }
    div#resize-bar-0 {
        display: none;
    }
}
[data-show-assembly="false"] {
    div#resize-bar-0 {
        display: none;
    }
    div#host-assembly-pane {
        display: none;
    }
}
[data-show-device-code="false"] {
    div#device-code-pane {
        display: none;
    }
    div#resize-bar-1 {
        display: none;
    }
}

span.line {
    counter-increment: line;
}
span.line:before {
    content: counter(line) ".";
    color: var(--cs-line-num);
    position: absolute;
    left: 0px;
    width: 4em;
    text-align: right;
}


/* Resize bars */
div.resize-bar {
    background: rgb(201, 231, 190);
    cursor: col-resize;
    border-left: 1px solid rgb(0, 0, 0);
    border-right: 1px solid rgb(0, 0, 0);
}

div.resize-bar > div.collapse-btns {
    position: relative;
    top: 50%;
    margin: 0px;
}

div.resize-bar > div.collapse-btns button {
    font-size: 11px;
    height: 3em;
    width: 1.5em;
    border-radius: 0;
    margin: 1em 0;
    border: none;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.1);
}

div.resize-bar > div.collapse-btns button:hover { background-color: rgba(255, 255, 255, 0.5); }
/*div.resize-bar > div.collapse-btns button.collapse-left:before  { content: "\21E4"; }*/
/*div.resize-bar > div.collapse-btns button.collapse-right:before { content: "\21E5"; }*/
div.resize-bar > div.collapse-btns button.collapse-left:before  { content: "<"; }
div.resize-bar > div.collapse-btns button.collapse-right:before { content: ">"; }

/* Revert collapser button that points to the left. */
div.resize-bar > div.collapse-btns button.collapse-left.active {
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 0, 0, 0.4);
}
div.resize-bar > div.collapse-btns button.collapse-left.active:before {
    /*content: "\21A6";*/
    content: ">>";
}
div.resize-bar > div.collapse-btns button.collapse-right.active {
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 0, 0, 0.4);
}
div.resize-bar > div.collapse-btns button.collapse-right.active:before {
    /*content: "\21A4";*/
    content: "<<";
}
div.collapse-btns *:before {
    color: var(--fg0);
}
div.resize-bar {
    background: var(--bg_visual_green);
    border-left: 1px solid rgb(120, 130, 105);
    border-right: 1px solid rgb(120, 130, 105);
}

[data-theme*="dark"] {
    div.resize-bar {
        background: rgb(101, 111, 96);
        border-left: 1px solid rgb(120, 130, 105);
        border-right: 1px solid rgb(120, 130, 105);
    }
}

/* Resizer Preview */
div#resizer-preview {
    position: absolute;
    width: 4px;
    height: 100%;
    background-color: gray;
    padding: 0;
    margin: 0;
    opacity: 50%;
    z-index: 190000;
}


div#device-code-pane code {
    line-height: 14px;
    white-space: pre;
}

/* IR Code Section CSS */
.ModuleBody {
    padding-left: 60px !important;
}

div.Function {
    margin: 0.2em 0.0em;
    padding: 0.1em;
    margin-right: 0.8em;
    margin-left: calc(-0.2em - 16px);
    padding-left: calc(0.2em + 16px);
    border-width: 3px;
    border-style: solid;
    border-radius: 8px;
    min-width: fit-content;
}
div.Function + div.Function {
    margin-top: 1.5em; /* Leave space between two functions. */
}

/* Give functions a slightly different background color to visually help navigate quickly. */
div.Function:nth-child(3n + 1) { background-color: rgba(200, 0, 0, 0.025); border-color: rgba(200, 0, 0, 0.03); }
div.Function:nth-child(3n + 2) { background-color: rgba(0, 200, 0, 0.025); border-color: rgba(0, 200, 0, 0.03); }
div.Function:nth-child(3n + 3) { background-color: rgba(0, 0, 200, 0.025); border-color: rgba(0, 0, 200, 0.03); }

/* Give Parallel fors a different color */
div.For { border-radius: 8px; }
div.For.for-type-parallel,
div.For.for-type-gpu_block {
    min-width: fit-content;
    background-color: rgba(240, 200, 0, 0.03);
    border: 3px solid rgba(240, 200, 0, 0.10);
    margin: 0.2em 0.0em;
    padding: 0.1em;
    margin-right: 0.8em;
    margin-left: calc(-0.2em - 16px);
    padding-left: calc(0.2em + 16px);
}
div.For.for-type-gpu_block div.For.for-type-gpu_block {
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
}
div.For.for-type-gpu_thread {
    background-color: rgba(240, 100, 50, 0.03);
    border: 3px solid rgba(240, 100, 50, 0.10);
    margin: 0.2em 0.0em;
    padding: 0.1em;
    margin-right: 0.8em;
    margin-left: calc(-0.2em - 16px);
    padding-left: calc(0.2em + 16px);
}
div.For.for-type-gpu_thread div.For.for-type-gpu_thread {
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

/* Collapse button and indent div logic */
input.show-hide-btn {
    appearance: none;
    margin-left: -17px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    height: 12px;
    vertical-align: top;
    width: 12px;
    height: 12px;
    border: 1px solid black;
    border-radius: 4px;
    transition: transform 0.2s;
    transform: rotate(0deg);
}
[data-theme*="dark"] {
    input.show-hide-btn {
        border: 1px solid #654735;
        color: #e2cca9;
    }
}
input.show-hide-btn:checked {
    transform: rotate(-90deg);
}

input.show-hide-btn:before {
    content: "V";
    font-size: 9px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    padding: 0;
    margin: 0;
    overflow: hidden;
}



div.indent {
    box-sizing: border-box;
    border-left: 2px solid transparent;
    padding-left: 25px;
    margin-left: -11px;
}

input.show-hide-btn:hover {
    color: var(--red);
}

/* The structure always has to be <button/><label/><div class=op-btns>[...]</div><div class=indent>...</div>.
 * All the random buttons, should go in the label.
 */
div.op-btns {
    display: inline-block;
    vertical-align: top;
    height: 1em;
    margin-left: 0.5em;
}
input.show-hide-btn + label + div.op-btns + div.indent {
    max-height: 10000000000px;
    opacity: 1;
    transition: opacity 0.4s, max-height 0.4s;
    border-left: 2px solid transparent;
}

/* TODO: add the same logic for hoving the closing brace. */
input.show-hide-btn:hover + label + div.op-btns + div.indent {
    border-left: 2px dotted var(--fg0);
}
input.show-hide-btn:hover + label > span:last-child,
input.show-hide-btn:hover + label + div.op-btns + div.indent + span.ClosingBrace {
    font-weight: bold;
}
input.show-hide-btn:hover + label + div.op-btns + div.indent + span.ClosingBrace:after {
    height: 7px;
    width: 7px;
    display: inline-block;
    border-bottom: 2px dotted var(--fg0);
    border-left: 2px dotted var(--fg0);
    position: relative;
    left: -18px;
    content: " ";
}

input.show-hide-btn:checked + label + div.op-btns + div.indent {
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
}
input.show-hide-btn:checked + label + div.op-btns:after {
    content: "(collapsed)";
    margin-left: 1em;
    font-style: italic;
    color: gray;
}

div.icon-btn {
    padding: 0 3px;
    margin-left: 2px;
    margin-right: 0px;
    width: 24px;
    height: 12px;
    line-height: 16px;
    vertical-align: middle;
    background: transparent;
    font-size: 22px;
    outline: 1px solid black;
    top: -1px;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
}
div.icon-btn:before {
    margin: 0;
    padding: 0;
    border: 0;
    display: inline-block;
}

div.jump-to-host-asm-btn {
    background:   rgba(255,50,0,0.1);
    outline-color: rgb( 255,50,0);
    color:        rgb( 255,50,0);
}
div.jump-to-device-code-btn {
    background:   rgba(70,170,50,0.1);
    outline-color: rgb( 70,170,50);
    color:        rgb( 70,170,50);
}

div.jump-to-host-asm-btn span.tooltip span, div.jump-to-device-code-btn span.tooltip span {
    display: block;
    margin-top: 0.6em;
    font-size: 10px;
    font-family: monospace;
    color: green;
}

div.jump-to-host-asm-btn:before, div.jump-to-device-code-btn:before, div.jump-to-viz-btn:before {
    content: "\279F";
}

div#ir-visualization-pane div.icon-btn {
    margin-left: 1px;
}

div.icon-btn:hover {
    outline-width: 2px;
}

div.code {
    white-space: pre;
}
div.code.ptx {
    tab-size: 26;
}


div.WrapLine      { margin-left: 30px; text-indent: -30px; }
span.OpeningBrace { margin-left: 0.3em; }

span.IfSpan,
span.ClosingBrace,
div.WrapLine,
div.Consumer,
div.Produce,
div.For,
div.Evaluate,
div.Allocate,
div.Function,
div.Buffer,
div.Evaluate {
    counter-increment: line;
}
span.ClosingBrace + span span.IfSpan {
    counter-increment: none;
}

[data-show-line-nums="true"] {
span.IfSpan:before,
span.ClosingBrace:before,
div.WrapLine:before,
div.Consumer:before,
div.Produce:before,
div.For:before,
div.Evaluate:before,
div.Allocate:before,
div.Function:before,
div.Buffer:before,
div.Evaluate:before {
    font-weight: normal;
    content: counter(line) '. ';
    display: inline-block;
    position: absolute;
    left: 0px;
    width: 50px;
    text-align: right;
    color: var(--cs-line-num);
    user-select: none;
    -webkit-user-select: none;
}
}

.tooltip-parent {
    position: relative;
    overflow: visible;
}

span.tooltip {
    opacity: 1;
    color: black;
    font-weight: normal;
    visibility: hidden;
    left: 50px;
    top: -10px;
    width: max-content;
    position: relative;
    display: block;
    padding: 8px;
    background: #fff7e0;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid #aaa;
    z-index: 9999;
    box-shadow: rgba(100, 100, 100, 0.8) 0 2px 5px 0;
    text-indent: 0px;
}

.tooltip-parent:hover span.tooltip {
    visibility: visible;
}

/* Cost model */

[data-hide-cost="true"] {
    div.node-cost {
        display: none;
    }
    .ModuleBody {
        padding-left: 30px !important;
    }
}
[data-show-line-nums="false"] {
    div.node-cost {
        left: 15px;
    }
}

div.node-cost {
    position: absolute;
    left: 52px; /* Enough for 4 digit line counter. */
    width: 40px;
}
div.cost-btn {
    width: 16px;
    height: 10px;
    margin-top: 0px;
    /*border: 1px solid rgba(0,0,0,0.1);*/
    position: relative;
    float: left;
    margin-right: 3px;
    box-sizing: border-box;
    outline: 1px solid rgba(0,0,0,0.1);
}
div.cost-btn:hover {
    cursor: pointer;
    /*border: 1px solid lightgray;*/
}
[data-theme*="dark"] {
    div.cost-btn {
        outline: 1px solid rgba(255,255,255,0.15);
    }
    .line-CostColorNone.block-CostColorNone { outline: none; }
}

.block-CostColor0:first-child { border-left: 8px solid oklch(calc(90.0% * var(--cost-Lf)) 0.05 140); }
.block-CostColor1:first-child { border-left: 8px solid oklch(calc(87.4% * var(--cost-Lf)) 0.06 140); }
.block-CostColor2:first-child { border-left: 8px solid oklch(calc(84.7% * var(--cost-Lf)) 0.06 140); }
.block-CostColor3:first-child { border-left: 8px solid oklch(calc(82.1% * var(--cost-Lf)) 0.07 140); }
.block-CostColor4:first-child { border-left: 8px solid oklch(calc(79.5% * var(--cost-Lf)) 0.07 140); }
.block-CostColor5:first-child { border-left: 8px solid oklch(calc(76.8% * var(--cost-Lf)) 0.08 140); }
.block-CostColor6:first-child { border-left: 8px solid oklch(calc(74.2% * var(--cost-Lf)) 0.08 140); }
.block-CostColor7:first-child { border-left: 8px solid oklch(calc(71.6% * var(--cost-Lf)) 0.09 140); }
.block-CostColor8:first-child { border-left: 8px solid oklch(calc(68.9% * var(--cost-Lf)) 0.09 140); }
.block-CostColor9:first-child { border-left: 8px solid oklch(calc(66.3% * var(--cost-Lf)) 0.10 140); }
.block-CostColor10:first-child { border-left: 8px solid oklch(calc(63.7% * var(--cost-Lf)) 0.10 140); }
.block-CostColor11:first-child { border-left: 8px solid oklch(calc(61.1% * var(--cost-Lf)) 0.11 140); }
.block-CostColor12:first-child { border-left: 8px solid oklch(calc(58.4% * var(--cost-Lf)) 0.11 140); }
.block-CostColor13:first-child { border-left: 8px solid oklch(calc(55.8% * var(--cost-Lf)) 0.12 140); }
.block-CostColor14:first-child { border-left: 8px solid oklch(calc(53.2% * var(--cost-Lf)) 0.12 140); }
.block-CostColor15:first-child { border-left: 8px solid oklch(calc(50.5% * var(--cost-Lf)) 0.13 140); }
.block-CostColor16:first-child { border-left: 8px solid oklch(calc(47.9% * var(--cost-Lf)) 0.13 140); }
.block-CostColor17:first-child { border-left: 8px solid oklch(calc(45.3% * var(--cost-Lf)) 0.14 140); }
.block-CostColor18:first-child { border-left: 8px solid oklch(calc(42.6% * var(--cost-Lf)) 0.14 140); }
.block-CostColor19:first-child { border-left: 8px solid oklch(calc(40.0% * var(--cost-Lf)) 0.15 140); }
.block-CostColorNone:first-child { border-left: transparent; }

.line-CostColor0:first-child { border-right: 8px solid oklch(calc(90.0% * var(--cost-Lf)) 0.05 140); }
.line-CostColor1:first-child { border-right: 8px solid oklch(calc(87.4% * var(--cost-Lf)) 0.06 140); }
.line-CostColor2:first-child { border-right: 8px solid oklch(calc(84.7% * var(--cost-Lf)) 0.06 140); }
.line-CostColor3:first-child { border-right: 8px solid oklch(calc(82.1% * var(--cost-Lf)) 0.07 140); }
.line-CostColor4:first-child { border-right: 8px solid oklch(calc(79.5% * var(--cost-Lf)) 0.07 140); }
.line-CostColor5:first-child { border-right: 8px solid oklch(calc(76.8% * var(--cost-Lf)) 0.08 140); }
.line-CostColor6:first-child { border-right: 8px solid oklch(calc(74.2% * var(--cost-Lf)) 0.08 140); }
.line-CostColor7:first-child { border-right: 8px solid oklch(calc(71.6% * var(--cost-Lf)) 0.09 140); }
.line-CostColor8:first-child { border-right: 8px solid oklch(calc(68.9% * var(--cost-Lf)) 0.09 140); }
.line-CostColor9:first-child { border-right: 8px solid oklch(calc(66.3% * var(--cost-Lf)) 0.10 140); }
.line-CostColor10:first-child { border-right: 8px solid oklch(calc(63.7% * var(--cost-Lf)) 0.10 140); }
.line-CostColor11:first-child { border-right: 8px solid oklch(calc(61.1% * var(--cost-Lf)) 0.11 140); }
.line-CostColor12:first-child { border-right: 8px solid oklch(calc(58.4% * var(--cost-Lf)) 0.11 140); }
.line-CostColor13:first-child { border-right: 8px solid oklch(calc(55.8% * var(--cost-Lf)) 0.12 140); }
.line-CostColor14:first-child { border-right: 8px solid oklch(calc(53.2% * var(--cost-Lf)) 0.12 140); }
.line-CostColor15:first-child { border-right: 8px solid oklch(calc(50.5% * var(--cost-Lf)) 0.13 140); }
.line-CostColor16:first-child { border-right: 8px solid oklch(calc(47.9% * var(--cost-Lf)) 0.13 140); }
.line-CostColor17:first-child { border-right: 8px solid oklch(calc(45.3% * var(--cost-Lf)) 0.14 140); }
.line-CostColor18:first-child { border-right: 8px solid oklch(calc(42.6% * var(--cost-Lf)) 0.14 140); }
.line-CostColor19:first-child { border-right: 8px solid oklch(calc(40.0% * var(--cost-Lf)) 0.15 140); }
.line-CostColorNone:first-child { border-right: transparent; }

.block-CostColor0:last-child { border-left: 8px solid oklch(calc(90.0% * var(--cost-Lf)) 0.05 300); }
.block-CostColor1:last-child { border-left: 8px solid oklch(calc(87.4% * var(--cost-Lf)) 0.06 300); }
.block-CostColor2:last-child { border-left: 8px solid oklch(calc(84.7% * var(--cost-Lf)) 0.06 300); }
.block-CostColor3:last-child { border-left: 8px solid oklch(calc(82.1% * var(--cost-Lf)) 0.07 300); }
.block-CostColor4:last-child { border-left: 8px solid oklch(calc(79.5% * var(--cost-Lf)) 0.07 300); }
.block-CostColor5:last-child { border-left: 8px solid oklch(calc(76.8% * var(--cost-Lf)) 0.08 300); }
.block-CostColor6:last-child { border-left: 8px solid oklch(calc(74.2% * var(--cost-Lf)) 0.08 300); }
.block-CostColor7:last-child { border-left: 8px solid oklch(calc(71.6% * var(--cost-Lf)) 0.09 300); }
.block-CostColor8:last-child { border-left: 8px solid oklch(calc(68.9% * var(--cost-Lf)) 0.09 300); }
.block-CostColor9:last-child { border-left: 8px solid oklch(calc(66.3% * var(--cost-Lf)) 0.10 300); }
.block-CostColor10:last-child { border-left: 8px solid oklch(calc(63.7% * var(--cost-Lf)) 0.10 300); }
.block-CostColor11:last-child { border-left: 8px solid oklch(calc(61.1% * var(--cost-Lf)) 0.11 300); }
.block-CostColor12:last-child { border-left: 8px solid oklch(calc(58.4% * var(--cost-Lf)) 0.11 300); }
.block-CostColor13:last-child { border-left: 8px solid oklch(calc(55.8% * var(--cost-Lf)) 0.12 300); }
.block-CostColor14:last-child { border-left: 8px solid oklch(calc(53.2% * var(--cost-Lf)) 0.12 300); }
.block-CostColor15:last-child { border-left: 8px solid oklch(calc(50.5% * var(--cost-Lf)) 0.13 300); }
.block-CostColor16:last-child { border-left: 8px solid oklch(calc(47.9% * var(--cost-Lf)) 0.13 300); }
.block-CostColor17:last-child { border-left: 8px solid oklch(calc(45.3% * var(--cost-Lf)) 0.14 300); }
.block-CostColor18:last-child { border-left: 8px solid oklch(calc(42.6% * var(--cost-Lf)) 0.14 300); }
.block-CostColor19:last-child { border-left: 8px solid oklch(calc(40.0% * var(--cost-Lf)) 0.15 300); }
.block-CostColorNone:last-child { border-left: transparent; }

.line-CostColor0:last-child { border-right: 8px solid oklch(calc(90.0% * var(--cost-Lf)) 0.05 300); }
.line-CostColor1:last-child { border-right: 8px solid oklch(calc(87.4% * var(--cost-Lf)) 0.06 300); }
.line-CostColor2:last-child { border-right: 8px solid oklch(calc(84.7% * var(--cost-Lf)) 0.06 300); }
.line-CostColor3:last-child { border-right: 8px solid oklch(calc(82.1% * var(--cost-Lf)) 0.07 300); }
.line-CostColor4:last-child { border-right: 8px solid oklch(calc(79.5% * var(--cost-Lf)) 0.07 300); }
.line-CostColor5:last-child { border-right: 8px solid oklch(calc(76.8% * var(--cost-Lf)) 0.08 300); }
.line-CostColor6:last-child { border-right: 8px solid oklch(calc(74.2% * var(--cost-Lf)) 0.08 300); }
.line-CostColor7:last-child { border-right: 8px solid oklch(calc(71.6% * var(--cost-Lf)) 0.09 300); }
.line-CostColor8:last-child { border-right: 8px solid oklch(calc(68.9% * var(--cost-Lf)) 0.09 300); }
.line-CostColor9:last-child { border-right: 8px solid oklch(calc(66.3% * var(--cost-Lf)) 0.10 300); }
.line-CostColor10:last-child { border-right: 8px solid oklch(calc(63.7% * var(--cost-Lf)) 0.10 300); }
.line-CostColor11:last-child { border-right: 8px solid oklch(calc(61.1% * var(--cost-Lf)) 0.11 300); }
.line-CostColor12:last-child { border-right: 8px solid oklch(calc(58.4% * var(--cost-Lf)) 0.11 300); }
.line-CostColor13:last-child { border-right: 8px solid oklch(calc(55.8% * var(--cost-Lf)) 0.12 300); }
.line-CostColor14:last-child { border-right: 8px solid oklch(calc(53.2% * var(--cost-Lf)) 0.12 300); }
.line-CostColor15:last-child { border-right: 8px solid oklch(calc(50.5% * var(--cost-Lf)) 0.13 300); }
.line-CostColor16:last-child { border-right: 8px solid oklch(calc(47.9% * var(--cost-Lf)) 0.13 300); }
.line-CostColor17:last-child { border-right: 8px solid oklch(calc(45.3% * var(--cost-Lf)) 0.14 300); }
.line-CostColor18:last-child { border-right: 8px solid oklch(calc(42.6% * var(--cost-Lf)) 0.14 300); }
.line-CostColor19:last-child { border-right: 8px solid oklch(calc(40.0% * var(--cost-Lf)) 0.15 300); }
.line-CostColorNone:last-child { border-right: transparent; }

.NoChildCost { border-left: none !important; }

.line-CostColorNone.block-CostColorNone { outline: none; }

/* Below is the style for the Syntax Highlighting with speed-highlight.
 * It's adapted from the default style from: https://unpkg.com/@speed-highlight/core@1.1.11/dist/themes/default.css
 */
[class*=shj-lang-]{
    white-space:pre;
    text-shadow:none;
    line-height:14px;
    box-sizing:border-box;
    width: fit-content;
}
.shj-inline{
    margin:0;
    padding:2px 5px;
    display:inline-block;
    border-radius:5px
}
[class*=shj-lang-]::selection,[class*=shj-lang-] ::selection{
    background: var(--bg-color)
}
[class*=shj-lang-]>div{
    display: block;
    overflow: visible;
    width: fit-content;
}
[class*=shj-lang-]>div :last-child{
    flex:1;
    outline:none
}
.shj-oneline{
    padding:12px 10px
}
.shj-multiline.shj-mode-header{
    padding:20px
}
.shj-multiline.shj-mode-header:before{
    content:attr(data-lang);
    color:#58f;
    display:block;
    padding:10px 20px;
    background:#58f3;
    border-radius:5px;
    margin-bottom:20px
}
